<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品类别数饼图</title>
    <script src="js/echarts5.2.2/echarts.js"></script>
    <script src="js/jquery3.5.1/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height: 400px"></div>
<script>
    $(function () {
        $.ajax({
            url:"getPieVO",
            type: "get",
            success:function (data) {
                console.log(data)
                let myCharts=echarts.init(document.getElementById("main"));
                let option = {
                    backgroundColor: '#2c343c',
                    title: {
                        text: 'Goods Pie',
                        left: 'center',
                        top: 20,
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    visualMap: {
                        show: false,
                        min: 80,
                        max: 600,
                        inRange: {
                            colorLightness: [0, 1]
                        }
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: data.sort(function (a, b) {
                                return a.value - b.value;
                            }),
                            roseType: 'radius',
                            label: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            labelLine: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            },
                            itemStyle: {
                                color: '#c23531',
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                };
                myCharts.setOption(option);
            }
        })
    })

</script>
</body>
</html>